<template>
  <view class="vipgive-container">
    <view class="card-background">
      <!-- <image class="bg-image" :src="cardInfo.bg_image" mode="aspectFill"></image> -->
    </view>

    <!-- 顶部卡片展示 -->
    <!-- <view class="card-showcase">
			<image class="card-image" :src="cardInfo.icon" mode="widthFix"></image>
			<view class="card-info">
				<text class="card-name">{{ cardInfo.card_name }}</text>
				<text class="card-value">价值 ¥{{ cardInfo.money_condition }}</text>
			</view>
		</view> -->

    <!-- 卡片说明 -->
    <view class="card-description" v-if="false">
      <!-- <view class="section-title">
				<image class="icon" :src="static_url + '/static/img/vip.png'" mode="aspectFit"></image>
				<text>会员卡说明</text>
			</view>
			<view class="description-content">
				<text class="desc-text">{{ cardInfo.describe }}</text>
			</view> -->
      <scroll-view
        scroll-y="true"
        style="position: absolute; width: 100%; height: 100%"
      >
        <parse :content="cardInfo.describe" @navigate="navigate"></parse>
      </scroll-view>
    </view>

    <scroll-view
      scroll-y="true"
      style="position: absolute; width: 100%; height: 100%"
    >
      <view class="card-top">
        <!-- <view class="card-background">
					<image class="bg-image" :src="cardInfo.image" mode="aspectFill"></image>
				</view> -->

        <!-- VIP卡片 -->
        <view class="vip-card">
          <image
            class="card-image"
            :src="cardInfo.image"
            mode="aspectFill"
          ></image>
        </view>
      </view>

      <!-- 赠送信息 -->
      <view class="gift-info">
        <view class="sender-info">
          <image
            class="avatar"
            :src="cardInfo.member_headimg"
            mode="aspectFill"
          ></image>
          <view class="sender-detail">
            <text class="name">{{ cardInfo.member_nickname }}</text>
            <text class="message">送你一张VIP会员卡，快来领取吧！</text>
          </view>
        </view>
      </view>

      <!-- background-color: pink;opacity: 0.4; -->
      <view
        class="card-info"
        style="position: absolute; width: 100%; margin-top: 20rpx"
      >
        <!-- <view class="section-title">
                    <image class="icon" :src="static_url + '/static/img/vip.png'" mode="aspectFit"></image>
                    <text>会员卡信息</text>
                </view> -->
        <parse :content="cardInfo.describe" @navigate="navigate"></parse>
        <view class="card-bottom" style="height: 100rpx; opacity: 0">
          <text>会员卡信息</text>
        </view>
      </view>
    </scroll-view>

    <!-- 卡片权益 -->
    <view class="card-benefits" v-if="false">
      <view class="section-title">
        <image
          class="icon"
          :src="static_url + '/static/img/vip.png'"
          mode="aspectFit"
        ></image>
        <text>会员特权</text>
      </view>
      <view class="benefits-list">
        <view class="benefit-item">
          <image
            class="benefit-icon"
            :src="static_url + '/static/img/vip.png'"
            mode="aspectFit"
          ></image>
          <view class="benefit-content">
            <text class="title">全场9折优惠</text>
            <text class="desc">会员专享商品折扣</text>
          </view>
        </view>
        <view class="benefit-item">
          <image
            class="benefit-icon"
            :src="static_url + '/static/img/vip.png'"
            mode="aspectFit"
          ></image>
          <view class="benefit-content">
            <text class="title">积分兑换礼品</text>
            <text class="desc">消费即可累积积分</text>
          </view>
        </view>
        <view class="benefit-item">
          <image
            class="benefit-icon"
            :src="static_url + '/static/img/vip.png'"
            mode="aspectFit"
          ></image>
          <view class="benefit-content">
            <text class="title">生日特权礼遇</text>
            <text class="desc">生日当月享双倍积分</text>
          </view>
        </view>

        <view class="benefit-item">
          <image
            class="benefit-icon"
            :src="static_url + '/static/img/vip.png'"
            mode="aspectFit"
          ></image>
          <view class="benefit-content">
            <text class="title">生日特权礼遇</text>
            <text class="desc">生日当月享双倍积分</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 使用说明 -->
    <view class="usage-guide" v-if="false">
      <view class="section-title">
        <image
          class="icon"
          :src="static_url + '/static/img/vip.png'"
          mode="aspectFit"
        ></image>
        <text>使用说明</text>
      </view>
      <view class="guide-content">
        <text class="guide-text">1. 领取后请在30天内激活使用</text>
        <text class="guide-text">2. 每个用户仅限领取一次</text>
        <text class="guide-text">3. 使用时请出示会员码</text>
        <text class="guide-text">4. 最终解释权归商家所有</text>
      </view>
    </view>

    <!-- 底部领取按钮 -->
    <view class="bottom-action">
      <button
        :style="{ background: t('color1') }"
        class="receive-btn"
        @tap="handleReceive"
      >
        立即领取
      </button>
      <!-- <text class="share-btn" @tap="handleShare">分享给好友</text> -->
    </view>
    <uni-popup id="dialogInput" ref="dialogInput" type="dialog">
      <uni-popup-dialog
        mode="input"
        title="领取提示"
        value=""
        placeholder="请输入此卡的支付密码"
        @confirm="getpwd"
        password="true"
      ></uni-popup-dialog>
    </uni-popup>
    <loading v-if="loading"></loading>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      cardInfo: {},
      loading: false,
      pre_url: app.globalData.pre_url,
    };
  },

  onLoad: function (opt) {
    console.log("viggive", opt);
    this.opt = app.getopts(opt);
    this.getdata(this.opt.member_vip_card_id);
  },

  methods: {
    getdata(id) {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "MemberVipCard/cardInfo?member_vip_card_id=" + id,
        {},
        function (res) {
          if (res && res.status == 200) {
            that.cardInfo = res.data;
            app.showLoading(false);
          } else {
            app.showLoading(false);
            app.error(res.msg);
          }
          that.loaded();
        }
      );
    },

    handleReceive() {
      let that = this;
      // uni.showModal({
      // 	title: '领取提示',
      // 	content: '领取前请先输入支付密码',
      // 	success: (res) => {
      // 		if (res.confirm) {
      // 			that.$refs.dialogInput.open();
      // 		}
      // 	}
      // });
      that.$refs.dialogInput.open();
    },

    getpwd: function (done, val) {
      let that = this;
      let paypwd = val;
      if (paypwd == "") {
        app.error("密码不能为空");
        return;
      }
      app.showLoading("领取中");
      app.post(
        "MemberVipCard/bind",
        {
          member_vip_card_id: that.cardInfo.id,
          password: paypwd,
        },
        function (res) {
          if (res && res.status == 200) {
            app.showLoading(false);
            that.$refs.dialogInput.close();
            app.success("领取成功");
            setTimeout(() => {
              app.goback();
            }, 1000);
          } else {
            app.showLoading(false);
            app.error(res.msg);
          }
        }
      );
    },

    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ["shareAppMessage", "shareTimeline"],
      });
    },
  },
  // 分享配置
  onShareAppMessage() {
    return {
      title: "送你一张VIP会员卡",
      path: "/pagesExt/vip/vipgive?id=" + this.cardInfo.id,
      imageUrl: this.cardInfo.cardImage,
    };
  },
};
</script>

<style lang="scss">
.vipgive-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 180rpx;

  .card-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(#f4d8b2, #fffcf5);

    .bg-image {
      width: 100%;
      height: 100%;
      // filter: blur(20px);
      // transform: scale(1.1);
      // opacity: 0.8;
    }
  }

  .card-top {
    padding: 80rpx;
    padding-bottom: 0;

    .card-background {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 520rpx;
      // height: 100vh;
      overflow: hidden;

      .bg-image {
        width: 100%;
        height: 100%;
        filter: blur(20px);
        transform: scale(1.1);
        opacity: 0.8;
      }
    }

    .vip-card {
      position: relative;
      border-radius: 30rpx;
      overflow: hidden;
      // background: #fff;
      //box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);

      .card-image {
        width: 100%;
        height: 360rpx;
        display: block;
      }

      .card-content {
        position: absolute;
        top: 40rpx;
        left: 40rpx;
        right: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-title {
          color: #fff;
          font-size: 32rpx;
        }

        .card-vip {
          color: #fff;
          font-size: 36rpx;
        }
      }
    }

    .button-group {
      display: flex;
      margin-top: 20rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;

      gap: 40rpx;

      .btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background: #8b0000;
        color: #fff;
        border-radius: 8rpx;
        font-size: 28rpx;
        border-radius: 44rpx;
      }
    }
  }

  .card-showcase {
    position: relative;
    height: 270rpx;
    overflow: hidden;

    .card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .card-info {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 30rpx;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      color: #fff;

      .card-name {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
        display: block;
      }

      .card-value {
        font-size: 28rpx;
        opacity: 0.9;
      }
    }
  }

  .gift-info {
    background: #ffedc6;
    padding: 30rpx;
    margin-bottom: 0rpx;
    margin-top: 80rpx;
    box-shadow: 0px 1px 7px -2px rgba(0, 0, 0, 0.9);
    z-index: 99;
    position: relative;

    .sender-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .sender-detail {
        flex: 1;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
          display: block;
        }

        .message {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;

    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }

  .card-description {
    // background: #fff;
    margin: 0rpx 0;
    z-index: 99;
    position: relative;

    .description-content {
      padding: 0 30rpx 30rpx;

      .desc-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 30rpx;
      }

      .benefit-list {
        display: flex;
        flex-wrap: wrap;

        .benefit-item {
          display: flex;
          align-items: center;
          width: 50%;
          margin-bottom: 20rpx;

          .benefit-icon {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
          }

          text {
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }

  .card-benefits {
    background: #fff;
    margin-bottom: 20rpx;

    .benefits-list {
      padding: 0 30rpx 30rpx;

      .benefit-item {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .benefit-icon {
          width: 80rpx;
          height: 80rpx;
          margin-right: 20rpx;
        }

        .benefit-content {
          flex: 1;

          .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }

          .desc {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
  }

  .usage-guide {
    background: #fff;

    .guide-content {
      padding: 0 30rpx 30rpx;

      .guide-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.8;
        display: block;
      }
    }
  }

  .bottom-action {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    // background: #fff;
    // box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 9;

    .receive-btn {
      width: 65%;
      height: 98rpx;
      line-height: 98rpx;
      background: #ba1f25;
      color: #fff;
      font-size: 32rpx;
      border-radius: 50rpx;
      margin-bottom: 20rpx;

      &::after {
        border: none;
      }
    }

    .share-btn {
      font-size: 28rpx;
      color: #666;
      padding: 10rpx 30rpx;
    }
  }
}
</style>
